<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <!-- 
            作用域插槽的用处：
            1.父组件替换子组件插槽的标签，但是内容由子组件提供(父组件不可以直接访问子组件的数据)
         -->

        <cpn></cpn>
        <h2>----------</h2>
        <cpn>
            <!-- <template slot-scope="slot">
                <span v-for="item in slot.data">{{item}} - </span>
            </template> -->
            <template v-slot:default="slotProp">
                <span>{{slotProp.data.join(' - ')}}</span>
            </template>  <!-- 新用法v-slot代替slot-scope -->
        </cpn> <!-- 希望展示的和默认的不一样，父组件根据子组件的数据进行显示（需要使用插槽） -->
        <h2>----------</h2>
        <cpn></cpn>
    </div>

    <template id="cpn">
        <div>
            <slot :data="pLanguage">
                <!-- data相当于一个变量，绑定了组件中的pLanguage数组对象 -->
                <!-- 插槽默认值 -->
                <ul v-for="item in pLanguage">
                    <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "你好呀",
            },
            components: {
                cpn: {
                    template: '#cpn',
                    data() {
                        return {
                            pLanguage: ["JavaScript", "C Sharp", "C++", "Java", "PHP", "Python"],
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>